<template>
  <el-container class="main_con">
    <!-- <div class="order_steps">
      <el-steps :active="active" align-center>
        <el-step title="买家下单" description="2020-10-27 17:00:01"></el-step>
        <el-step title="买家付款" description="2020-10-27 17:00:01"></el-step>
        <el-step title="商家发货" description="2020-10-27 17:00:01"></el-step>
        <el-step title="订单完成" description="2020-10-27 17:00:01"></el-step>
      </el-steps>
    </div> -->
    <div class="orderdetail">
      <!-- <span class="title">订单详情</span> -->
      <div class="order_content" style="margin-top:0px">
        <!-- <i></i> -->
        <!-- <div class="status_text"> -->
        <span>订单状态:</span>
        <span style="font-weight: bold">{{obj | getstatustxt }}</span>
        <!-- </div> -->
      </div>

      <div class="order_content">
        <div class="conetnt_a">
          <div class="content_c bor">
            <div class="order_title"><span class="order_title_text">订单信息</span></div>
            <div class="line">
              <div class="lb">
                <div class="label">订单编号:</div>
                <div class="txt">{{ obj.order_no }}</div>
              </div>
            </div>
        <!--    <div class="line">
              <div class="lb">
                <div class="label">支付流水号:</div>
                <div class="txt">{{ obj.pay_no }}</div>
              </div>
            </div>
            <div class="line">
              <div class="lb">
                <div class="label">内部单号:</div>
                <div class="txt">{{ obj.unified_order_no }}</div>
              </div>
            </div>

            <div class="line">
              <div class="lb">
                <div class="label">付款方式:</div>
                <div class="txt">{{ obj.pay_id }}</div>
              </div>
            </div> -->
            <div class="line" v-if="obj.user">
              <div class="lb">
                <div class="label">买家:</div>
                <div class="txt">
                  <el-button size="medium" type="text" @click="showUser">{{ obj.user.nickname }}</el-button>
                </div>
              </div>
            </div>
            <div class="line">
              <div class="lb">
                <div class="label">配送方式:</div>
                <div class="txt" v-if="obj.order_type == 1">快递</div>
                <div class="txt" v-else-if="obj.order_type == 2">自提</div>
                <div class="txt" v-else-if="obj.order_type == 3">同城</div>
              </div>
            </div>
          </div>
          <div class="content_c">
            <div class="order_title"><span class="order_title_text">发货信息</span></div>
            <div class="line">
              <div class="lb">
                <div class="label">来源:</div>
                <div class="txt"><i class="weixin el-sc-weixin4"></i></div>
              </div>
            </div>
            <div class="line">
              <div class="lb">
                <div class="label">收货人:</div>
                <div class="txt">
                  {{ obj.consignee }}
                  <el-button type="text" v-if="obj.status == '待支付' || obj.status == '待发货'" @click="changeAddress"><i class="el-icon-edit"></i></el-button>
                </div>
              </div>
            </div>
            <div class="line">
              <div class="lb">
                <div class="label">联系号码:</div>
                <div class="txt">{{ obj.iphone }}</div>
              </div>
            </div>
            <div class="line">
              <div class="lb">
                <div class="label">收货地址:</div>
                <div class="txt">{{ obj.address }}</div>
              </div>
            </div>
            <!-- <div class="line">
    <div class="lb">
      <div class="label">物流单号</div>
      <div class="txt">{{obj.freight ? obj.freight : '-'}}</div>
    </div>
  </div> -->
            <div class="line">
              <div class="lb">
                <div class="label">买家备注:</div>
                <div class="txt">{{ obj.remake }}</div>
              </div>
            </div>
          </div>
        </div>
        <el-divider></el-divider>
        <div class="buttons">
          <el-button type="primary" v-if="obj.order_type == 1 && (obj.status == '待发货' || obj.status == '部分发货')" size="medium" @click="toExpress" style="margin-right: 10px">
            确认发货
          </el-button>
        </div>
      </div>
      <div class="order_items">
        <div class="list">
          <el-table :data="obj.orderCommoditys">
            <el-table-column label="订单商品">
              <template slot-scope="scope">
                <div class="pro">
                  <div class="img"><vimage style="width: 80px; height: 80px" :src="scope.row.goods.master" fit="fit"></vimage></div>
                  <div class="txt">
                    <div class="name">{{ scope.row.name }}</div>
                    <div class="class">{{ scope.row.pvs_value_new }}</div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="价格(积分)">
              <template slot-scope="scope">
                {{ scope.row.sell_price }}
              </template>
            </el-table-column>
            <el-table-column label="数量">
              <template slot-scope="scope">
                X{{ scope.row.count }}
              </template>
            </el-table-column>
            <el-table-column label="小计(积分)">
              <template slot-scope="scope">
                {{ scope.row.money }}
              </template>
            </el-table-column>
    <!--        <el-table-column prop="status" label="状态">
              <template slot-scope="scope">
                {{ scope.row.status |  getstatustxt}}
              </template>
            </el-table-column> -->
            <el-table-column label="物流单号">
              <template slot-scope="scope">
                {{ scope.row.express_company }} - {{ scope.row.logistics_no }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="total">
          <div class="count">
            <div class="line">
              <div class="label">商品小计</div>
              <div class="money">{{ this.obj.money.toFixed(2) }}</div>
            </div>
       <!--     <div class="line">
              <div class="label">运费</div>
              <div class="money">￥{{ obj.freight ? obj.freight : '0.00' }}</div>
            </div>
            <div class="line">
              <div class="label">优惠抵扣</div>
              <div class="money red">-￥{{ obj.discount || 0.0 }}</div>
            </div>

            <div class="line">
              <div class="label">积分抵扣</div>
              <div class="money red">-￥{{ obj.discount_amount || 0.0 }}</div>
            </div>
            <div class="line">
              <div class="label">实付款</div>
              <div class="money red bold">￥{{ obj.allprice }}</div>
            </div> -->
          </div>
        </div>
      </div>
    </div>

  </el-container>
</template>

<script>
// import orderExpress from './components/orderExpress';
// import orderAddress from './components/orderAddress';
import {getOrder} from '@/api/shop/order';
import {getorderdetail} from '@/api/mall/integral'
import {createReceipt, getReceiptTemplateList, getReceiptPrinterList} from '@/api/shop/print';
export default {
  data() {
    return {
      rk: 1,
      showExpress: false,
      orderExpObj: {},
      showAddress: false,
      orderAddressObj: {},
      isLoading: false,
      active: 1,
      orderItemCountPrice: '0.00',
      obj: {},
      showPrintReceipt: false,
      templateRecList: [],
      templateList: [],
      psoRec: {
        order_id: [],
        printer_id: '',
        template_id: ''
      },
      jur_addons: {}
    };
  },

  created() {
    if (this.$route.query.id) {
      //查看详情
      this.getOrder(this.$route.query.id);
    } else {
      //无参数,禁止进入该页面
      this.$router.back(-1);
    }
  },
  filters: {
    getstatustxt(data) {
      let val = data.status;
      switch (val) {
        case 0:
          return '未付款';
          break;
        case 1:
          return '待发货';
          break;
        case 2:
          return data.order_type == 1 ? '待收货' : '待核销';
          break;
        case 3:
          return '已收货';
        case 4:
          return '已关闭';
          break;
        default:
          return '-';
          break;
      }
    }
  },
  mounted() {
    // this.$jur_addons([10, 14]).then(a => {
    //   this.jur_addons = a;
    //   if (a[14] || a[10]) {
    //     this.getTemplateList();
    //     this.getTemplateRecList();
    //   }
    // });

    //this.searchList();
  },
  methods: {
    //查看用户详情
    showUser() {
      console.log('显示用户详情');
    },
    //获取订单详情数据
    getOrder(id) {
      this.isLoading = true;
      getorderdetail(id)
        .then(res => {
          this.isLoading = false;
          let o = res.msg;
          let x = 0;
          o.orderCommoditys=[];
          o.orderCommoditys.push(o.orderCommodity)

          o.orderCommoditys.forEach(e => {
          if (e.pvs_value) {
          let l = e.pvs_value.split(','),
          s = '';
          l.forEach(k => {
          s += k.split(':')[1] + '+';
          });
          s = s.substring(0, s.length - 1);
          e.pvs_value_new = s;
          }
          // 处理小计数据
          // e.countPrice =
          // if (o.order_type == 2 && e.status == '待发货') {
          //   e.status = '待核销';
          // }
          // this.orderItemCountPrice =e.money;
          // let allprice = Number(o.money) - Number(o.discount) - Number(o.discount_amount) + Number(o.freight);
          // o.allprice = allprice.toFixed(2);
          });
          // let e=o.orderCommoditys
          // //转换处理SKU数据->红+L+大

          //this.obj = res.msg;
          this.obj = o;
          console.log(this.obj)
        })
        .catch(e => {
          this.isLoading = false;
        });
    },
    //修改收货信息
    changeAddress(item) {
      //补全不同字段
      this.orderAddressObj = {
        id: this.obj.id,
        address: this.obj.address,
        user_real_name: this.obj.consignee,
        user_mobile: this.obj.iphone,
        status: this.obj.status
      };
      this.showAddress = true;
    },
    //修改收货信息回调
    closeAddress() {
      this.showAddress = false;
      this.getOrder(this.$route.query.id);
    },
    //确认发货
    toExpress() {
      this.rk++;
      this.orderExpObj = {...this.obj};
      //补全不同字段
      this.orderExpObj.user_real_name = this.obj.consignee;
      this.orderExpObj.user_mobile = this.obj.iphone;

      //默认设置发货方式
      // if(!this.obj.deliver_type){
      //   this.obj.deliver_type = 1;
      // };

      // if(this.obj.status == '待发货'){
      //   this.$set(this.orderExpObj,'type','1');
      // }else if(this.obj.status == '部分发货'){
      //   this.$set(this.orderExpObj,'type','2');
      // };
      this.$set(this.orderExpObj, 'cids', []);
      this.$set(this.orderExpObj, 'logistics_no', '');
      this.$set(this.orderExpObj, 'express_company', '');

      this.showExpress = true;
    },
    //发货回调函数
    closeExpress() {
      this.showExpress = false;
      this.getOrder(this.$route.query.id);
    }
  }
};
</script>

<style lang="scss" scoped>
.orderdetail {
  // background: #FFFFFF;
  .title {
    font-size: 24px;
    color: #333;
    font-weight: 500;
    padding: 40px;
    display: block;
  }
  .order_title {
    display: flex;
    height: 60px;
    background: #ffffff;
    align-items: center;
    .order_title_text {
      display: flex;
      flex: 1;
      height: 60px;
      line-height: 60px;
      font-size: 16px;
      font-weight: bold;
      color: #333333;
    }
    // display: block;
    // background-color: #FFFFFF;
  }
}
.order_steps {
  background: #fff;
  padding: 40px 100px;
}
.order_status {
  height: 60px;
  // margin: 0 20px;
  background: #ffffff;
  display: flex;
  align-items: center;
  border-radius: 10px;
  padding: 0 40px;
  font-size: 16px;
  font-weight: bold;
  color: #333333;

  // justify-content: center;
  // .status_text{

  //   font-size: 24px;
  //   font-family: PingFang SC;
  //   font-weight: bold;
  //   color: #333333;
  // }
}
.order_content {
  margin-top: 20px;
  background: #fff;
  padding: 20px 0;
  color: #606266;
  font-size: 14px;
  padding: 20px;
  .conetnt_a {
    display: flex;
    .content_c {
      flex: 1;
      padding-left: 20px;
    }
  }
  // display: flex;

  .buttons {
    text-align: right;
    padding-bottom: 20px;
    .el-button {
      // background: #4d6ef2;
      &:hover {
        background: #3455da;
        color: #fff;
      }
    }
  }
  .line {
    display: flex;
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    .lb {
      display: flex;
      flex-grow: 1;

      .label {
        width: 80px;
        text-align: right;
        flex-shrink: 0;
        margin-right: 5px;
      }

      .txt {
        // display: -webkit-box; /*作为弹性伸缩盒子模型显示*/
        // -webkit-line-clamp: 1; /*显示的行数；如果要设置2行加...则设置为2*/
        // overflow: hidden; /*超出的文本隐藏*/
        // text-overflow: 'ellipsis'; /* 溢出用省略号*/
        // -webkit-box-orient: vertical; /*伸缩盒子的子元素排列：从上到下*/

        .weixin {
          font-size: 18px;
          color: #333333;
        }
      }
    }

    .status {
      display: flex;
      width: 300px;

      .label {
        width: 80px;
        text-align: right;

        &::after {
          content: ('：');
        }
      }

      .txt {
        font-size: 14px;
        font-weight: 700;
      }
    }
  }
}

.order_items {
  margin-top: 20px;
  background: #fff;
  padding: 20px;
  color: #606266;
  font-size: 14px;

  .list {
    .pro {
      display: flex;

      .img {
        width: 80px;
        margin-right: 10px;
      }

      .txt {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-content: space-between;
      }
    }
  }

  .total {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;

    .count {
      .line {
        display: flex;
        height: 36px;
        line-height: 36px;

        .label {
          width: 80px;
          text-align: right;
          flex-shrink: 0;

          &::after {
            content: ('：');
          }
        }

        .money {
          font-size: 16px;

          &.red {
            color: #f56c6c;
          }

          &.bold {
            font-weight: bold;
          }
        }
      }
    }
  }
}
.psoRec_item {
  display: flex;
  align-items: center;
  margin-bottom: 22px;

  .label {
    width: 100px;
    text-align: right;
  }

  .content {
    flex-grow: 1;
  }
}
.bor {
  border-right: 1px solid #dcdfe6;
}
</style>
